<template>
  <div class="station-container">
    <el-row :gutter="10">
      <el-col :span="6" class="station-left">
        <el-card class="h-full">
          <template #header>
            <div class="card-header">
              <span>广州（万科金色梦想）</span>
              <el-button class="button" type="primary">切换</el-button>
            </div>
          </template>
          <div class="station-content">
            <el-image src="src\assets\logo.png"></el-image>
            <p>广州（万科金色梦想）</p>
            <p>广东</p>
            <el-radio-group>
              <el-radio-button label="汽车" />
              <el-radio-button label="电瓶车" />
            </el-radio-group>
            <div class="stations-count">
              <div>4个交流桩</div>
              <div>4个直流桩</div>
            </div>
          </div>
          <div class="m-l-20">
            今日充电次数：0次<br />
            今日充电电量：0KWh<br />
            今日充电时长：0小时
          </div>
        </el-card>
      </el-col>
      <el-col :span="18" class="station-right">
        <el-row :gutter="5">
          <el-col :span="4">
            <el-card>
              充电桩回路<br />
              8个
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card>
              充电回路<br />
              8个
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card>
              空闲回路<br />
              8个
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card>
              插枪空闲回路<br />
              8个
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card>
              离线回路<br />
              8个
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card>
              故障回路<br />
              8个</el-card
            >
          </el-col>
        </el-row>
        <el-row>
          <el-card class="w-full mt2">
            <el-tabs class="h-75vh">
              <!-- 阵列模式 -->
              <el-tab-pane>
                <template #label>
                  <el-icon size="20"><i-ep-menu /></el-icon>
                  <span>阵列模式</span>
                </template>
                <el-row>
                  <el-col :span="4">
                    <el-card shadow="hover" class="station-card">
                      <p>设备号</p>
                      <el-icon size="50"><i-ep-house /></el-icon>
                      <p>今日电量：</p>
                      <p>今日次数：</p>
                      <p>今日时长：</p>
                      <p>电压：</p>
                      <p>电流：</p>
                      <p>温度：</p>
                      <el-button round size="small">详情</el-button>
                    </el-card>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <!-- 表格模式 -->
              <el-tab-pane>
                <template #label>
                  <el-icon size="20"><i-ep-expand /></el-icon>
                  <span>表格模式</span>
                </template>
                模式2
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.station-container {
  position: relative;
  padding: 5px 10px;
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .station-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    .stations-count {
      width: 60%;
      height: 100px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
  }
  .station-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    --el-card-padding: 10px;
    p {
      margin: 2px 0;
    }
  }
}
</style>
